<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!--    <script th:src="@{/vue@2.js}"></script>-->
</head>
<body>

<!--&lt;!&ndash; Standard button &ndash;&gt;-->
<!--<button type="button" class="btn btn-default">（默认样式）Default</button>-->

<!--&lt;!&ndash; Provides extra visual weight and identifies the primary action in a set of buttons &ndash;&gt;-->
<!--<button type="button" class="btn btn-primary">（首选项）Primary</button>-->

<!--&lt;!&ndash; Indicates a successful or positive action &ndash;&gt;-->
<!--<button type="button" class="btn btn-success">（成功）Success</button>-->

<!--&lt;!&ndash; Contextual button for informational alert messages &ndash;&gt;-->
<!--<button type="button" class="btn btn-info">（一般信息）Info</button>-->

<!--&lt;!&ndash; Indicates caution should be taken with this action &ndash;&gt;-->
<!--<button type="button" class="btn btn-warning">（警告）Warning</button>-->

<!--&lt;!&ndash; Indicates a dangerous or potentially negative action &ndash;&gt;-->
<!--<button type="button" class="btn btn-danger">（危险）Danger</button>-->

<!--&lt;!&ndash; Deemphasize a button by making it look like a link while maintaining button behavior &ndash;&gt;-->
<!--<button type="button" class="btn btn-link">（链接）Link</button>-->


<div th:text="${content}"></div>
<a th:href="${url}">百度</a>



<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">

    {{name}}

    <button @click="updateName">updateName</button>

</div>

<script>

    console.log(".........index...........")

    new Vue({
        //el element 代表当前Vue托管哪一个html标签
        //#号开头表示按id值来找
        el: "#app"
        ,
        data: {
            name:"蜗牛",
            bookName:""
        }
        ,
        methods: {
            updateName(){
                //this 代表方法所在的对象, 也就是vue对象
                console.log(this)
                this.name = "杭州蜗牛";
            }
            ,
            initBookName(){
                let _this=this;
                //Jquery封装的异步请求
                //两个参数  第一个是url   第二个是请求结果处理的回调函数
                $.get("/getBookName",function (data) {
                    console.log(data);
                    //这里this代表的是Jquery发起请求的对象,具体参看控制台输出
                    this.name = data;
                    console.log("---------------")
                    console.log(this);
                    console.log("---------------")
                    console.log(_this);
                    _this.name=data;
                });

                console.log("我在 getBookName 之后")

                //三个参数  第一个是url  第二个是请求体数据  第三个是请求结果处理的回调函数
                // $.post("url",{currentPage:1,pageSize:5},function (data){
                //     //......
                // });
            }

        }
        ,
        created(){
            //在vue声明周期中,该方法会在vue对象创建时就被调用
            console.log("created方法被调用了")
            console.log("这是this "+this)
            console.log("-------------------------")
            console.log(this)
            console.log("-------------------------")
            console.log(this.name)
            console.log("-------------------------")
            this.updateName();

            this.initBookName();
        }

    });


</script>


</body>
</html>